<template>
  <div class="history">
    <!-- 卡片 -->
    <el-card class="box-card">
      <!-- 标题 -->
      <div slot="header" class="clearfix">
        <span>访客记录</span>
        <!-- <el-button
          style="float: right; padding: 3px 0"
          type="text"
        >添加用户 </el-button> -->
      </div>
      <!-- 标题 -->

      <!-- 筛选内容 -->
      <div class="search">
        <el-input
          placeholder="请输入用户名"
          v-model="params.uname"
          class="input-with-select">
          <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>

        <el-date-picker
          v-model="params.date"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </div>
      <!-- 筛选内容 -->

      <!-- 表格内容 -->
      <QfTable :tableData="tableData" :columns="columns"></QfTable>
      <!-- 表格内容 -->

      <!-- 分页 -->

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="params.pagenum"
        :page-sizes="[100, 200, 300, 400]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400">
      </el-pagination>
      <!-- 分页 -->
    </el-card>
  </div>
</template>

<script>
import QfTable from '../../components/qf-table/Index.vue';
import tableData from '~mock/users/history';
// console.log(tableData);
export default {
  components: {
    QfTable
  },
  data() {
    return {
      params: {
        // 分页
        pagenum: 1,
        // 搜索
        uname: '',
        date: []
      },

      // 表格数据
      columns: [
        { title: '编号', field: 'id' },
        { title: '用户', field: 'uname' },
        { title: '登录方式', field: 'type' },
        { title: '登录城市', field: 'area' },
        { title: '登录时间', field: 'login_time' },
        { title: '上一次登录时间', field: 'last_login_time' }
      ],
      // 表格数据
      tableData: tableData.data
    };
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    }
  }
};
</script>

<style lang="scss" scoped></style>
